<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>乐购商城-首页</title>
    <!-- 1.引入样式表: 注意引入顺序 -->
    <!-- 引入样式重置表 -->
    <link rel="stylesheet" href="./css/reset.css">
    <!-- 引入公用样式表 -->
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/slider.css">
    <link rel="stylesheet" href="./css/module.css">
    <!-- 引入当前页面样式 -->
    <link rel="stylesheet" href="./css/home.css">
    <script src="./lib/jquery.js"></script>
    <script src="./js/home.js"></script>
</head>

<body>
    <!-- 1.头部开始 -->
    <div class="header">
        <!-- 头部上 -->
        <div class="header_top">
            <div class="wrapper">
                <span class="span1">legochina.cn</span>
                <span class="span2 fr">
                    欢迎光临<a href="#" class="a1">乐购</a>,
                    请 <a href="#" class="a2">登录</a>\
                    <a href="./reg.html" class="a1">注册</a>
                </span>
                <!-- logo -->
                <img src="./imgs/01_header/logo.jpg" alt="">
            </div>
        </div>
        <!-- 头部中 -->
        <div class="header_mid clearfix wrapper">
            <!-- 搜索框 -->
            <form action="#" class="clerafix fl search">
                <input type="text" placeholder="创意文具" class="inp fl">
                <input type="button" class="btn fl">
            </form>
            <!-- 购物车,我的订单 -->
            <div class="div1 clearfix fr">
                <span class="fl">
                    <p>购物车 3</p>
                </span>
                <span class="fl">我的订单</span>
            </div>
        </div>
        <!-- 头部下 -->
        <ul class="clearfix wrapper">
            <li><a href="#">图书</a></li>
            <li><a href="#">电子书</a></li>
            <li><a href="#">原创文学</a></li>
            <li><a href="#">服装</a></li>
            <li><a href="#">运动户外</a></li>
            <li><a href="#">孕婴童</a></li>
            <li><a href="#">家居</a></li>
            <li><a href="#">创意文具</a></li>
            <li><a href="#">地方特产</a></li>
            <li><a href="#">海外购</a></li>
            <li><a href="#">电器城</a></li>
        </ul>
    </div>
    <!-- 头部结束 -->

    <!-- 2.banner -->
    <div id="banner" class="wrapper clearfix">
        <!-- 分类菜单 -->
        <ul class="category fl">
            <!-- 
                <li>
                    <p>图书、电子书、童书</p>
                    <div>
                        box1
                    </div>
                </li> 
            -->
            <script>
                //后期 这个数组
                //let data_p=调用后端结构 拿到这个数组
                let data_p = [
                    "图书、电子书、童书",
                    "创意文具",
                    "服饰、内衣",
                    "鞋靴、箱包",
                    "运动户外",
                    "孕、婴、童",
                    "家居、家纺、汽车",
                    "家具、家族、康体",
                    "美妆、个人护理、成人",
                    "食品、茶酒、生鲜",
                    "腕表、珠宝、眼镜", "手机数码",
                    "图电脑办公",
                    "家用电器"
                ]
                let data_div = [
                    "box1",
                    "box2",
                    "box3",
                    "box4",
                    "box5",
                    "box6",
                    "box7",
                    "box8",
                    "box9",
                    "box10",
                    "box11",
                    "box12",
                    "box13",
                    "box14",
                ]

                for (let i = 0; i < 14; i++) {
                    document.write(`
                            <li>
                                <p>${data_p[i]}</p>
                                <div>
                                    ${data_div[i]}
                                </div>
                            </li> 
                        `)
                }
            </script>
        </ul>
        <!--轮播开始-->
        <div class="pptbox fl" id="bannerInner">
            <!--轮播的内容-->
            <ul class="innerwrapper">
                <li><a href="#"><img src="./imgs/02_banner/ppt1-1.jpg" alt=""></a></li>
                <li><a href="#"><img src="./imgs/02_banner/ppt1-2.jpg" alt=""></a></li>
                <li><a href="#"><img src="./imgs/02_banner/ppt1-3.jpg" alt=""></a></li>
                <li><a href="#"><img src="./imgs/02_banner/ppt1-4.jpg" alt=""></a></li>
                <li><a href="#"><img src="./imgs/02_banner/ppt1-5.jpg" alt=""></a></li>
                <li><a href="#"><img src="./imgs/02_banner/ppt1-6.jpg" alt=""></a></li>
            </ul>
            <!--数字控制器-->
            <ul class="controls" id="my_num_controls">
                <li class="current">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
            </ul>
            <!--按钮控制器-->
            <span class="btnleft"></span>
            <span class="btnright"></span>
        </div>
        <!--轮播结束-->

    </div>

    <!-- 3.今日推荐 -->
    <div id="recommend" class="wrapper">
        <h2>乐购·今日推荐</h2>
        <ul class="clearfix">
            <img src="" alt="">
            <script>
                for (let i = 0; i < 12; i++) {
                    if (i <= 5) {
                        document.write(`
                        <li>
                            <div>
                                <img src="./imgs/03_recommend/product01.jpg" alt="">
                            </div>
                            <img src="./imgs/03_recommend/limitTime.jpg" alt="">
                            <p class="p_name">黑爵青蜂侠六键电竞游戏鼠标</p>
                            <p class="p_info">全国联保 一年免费包换</p>
                            <p class="price">￥:299</p>
                        </li>
                        `)
                    } else {
                        document.write(`
                        <li>
                            <div>
                                <img src="./imgs/03_recommend/product02.jpg" alt="">
                            </div>
                            <img src="./imgs/03_recommend/limitTime.jpg" alt="">
                            <p class="p_name">黑爵青蜂侠六键电竞游戏鼠标</p>
                            <p class="p_info">全国联保 一年免费包换</p>
                            <p class="price">￥:299</p>
                        </li>
                        `)
                    }
                }
            </script>
        </ul>
    </div>

    <!-- 4.电子书 -->
    <div id="ebook" class="wrapper clearfix floor">
        <!-- ebook左边 -->
        <div class="ebook_left fl">
            <!-- 左边上部分 -->
            <div class="ebook_left_top clearfix">
                <h2 class="title fl">
                    图书 电子书
                </h2>
                <ul class="ebook_tab fr clearfix">
                    <li class="active">最新上架</li>
                    <li>畅销书籍</li>
                    <li>电子书</li>
                </ul>
            </div>
            <!-- 左边下方 -->
            <div class="ebook_left_bottom clearfix">
                <!-- 书籍分类 -->
                <div class="book_category fl">
                    <img src="./imgs/04_ebook/left.jpg" alt="">
                    <ul class="clearfix">
                        <li>中小学教辅</li>
                        <li>外语</li>
                        <li>考试</li>
                        <li>小说</li>
                        <li>文学</li>
                        <li>青春文学</li>
                        <li>成功\励志</li>
                        <li>管理</li>
                        <li>历史</li>
                        <li>哲学\宗教</li>
                        <li>亲子\宗教</li>
                        <li>全部分类&gt;</li>
                    </ul>
                </div>
                <!-- 最新上架 -->
                <ul class="book_list clearfix fr show">
                    <li>
                        <!--轮播开始-->
                        <div class="pptbox fl" id="ebook_slider">
                            <!--轮播的内容-->
                            <ul class="innerwrapper">
                                <li>
                                    <a href="#"><img src="./imgs/04_ebook/ppt2-1.jpg" /></a>
                                </li>
                                <li>
                                    <a href="#"><img src="./imgs/04_ebook/ppt2-2.jpg" /></a>
                                </li>
                                <li>
                                    <a href="#"><img src="./imgs/04_ebook/ppt2-3.jpg" /></a>
                                </li>
                                <li>
                                    <a href="#"><img src="./imgs/04_ebook/ppt2-4.jpg" /></a>
                                </li>
                            </ul>
                            <!--数字控制器-->
                            <ul class="controls" id="my_num_controls">
                                <li class="current">1</li>
                                <li>2</li>
                                <li>3</li>
                                <li>4</li>
                            </ul>
                            <!--按钮控制器-->
                            <span class="btnleft"></span>
                            <span class="btnright"></span>
                        </div>
                        <!--轮播结束-->
                    </li>

                    <script>
                        for (let i = 0; i < 6; i++) {
                            document.write(`
                                
                                <li>
                                    <p class="p1 font18 c3">奥运狂欢</p>
                                    <p class="p2 font14 cf60">10万种电子书直降40%</p>
                                    <div>
                                        <img src="./imgs/04_ebook/center1.jpg" alt="">
                                    </div>
                                    <p class="ti15">
                                        <span class="font14 cf42">&yen;49</span>&emsp;
                                        <span class="font14 c3 td">&yen;79</span>
                                    </p>
                                </li> 
                            `)
                        }
                    </script>
                </ul>

                <!-- 独家畅销 -->
                <ul class="book_list clearfix fr">
                    <li>
                        <!--轮播开始-->
                        <div class="pptbox fl" id="ebook_slider">
                            <!--轮播的内容-->
                            <ul class="innerwrapper">
                                <li>
                                    <a href="#"><img src="./imgs/04_ebook/ppt2-1.jpg" /></a>
                                </li>
                                <li>
                                    <a href="#"><img src="./imgs/04_ebook/ppt2-2.jpg" /></a>
                                </li>
                                <li>
                                    <a href="#"><img src="./imgs/04_ebook/ppt2-3.jpg" /></a>
                                </li>
                                <li>
                                    <a href="#"><img src="./imgs/04_ebook/ppt2-4.jpg" /></a>
                                </li>
                            </ul>
                            <!--数字控制器-->
                            <ul class="controls" id="my_num_controls">
                                <li class="current">1</li>
                                <li>2</li>
                                <li>3</li>
                                <li>4</li>
                            </ul>
                            <!--按钮控制器-->
                            <span class="btnleft"></span>
                            <span class="btnright"></span>
                        </div>
                        <!--轮播结束-->
                    </li>

                    <script>
                        for (let i = 0; i < 6; i++) {
                            document.write(`
                                <li>
                                    <p class="p1 font18 c3">七夕狂欢</p>
                                    <p class="p2 font14 cf60">10万种电子书直降40%</p>
                                    <div>
                                        <img src="./imgs/04_ebook/center2.jpg" alt="">
                                    </div>
                                    <p class="ti15">
                                        <span class="font14 cf42">&yen;49</span>&emsp;
                                        <span class="font14 c3 td">&yen;79</span>
                                    </p>
                                </li> 
                            `)
                        }
                    </script>
                </ul>

                <!-- 电子书 -->
                <ul class="book_list clearfix fr">
                    <li>
                        <!--轮播开始-->
                        <div class="pptbox fl" id="ebook_slider">
                            <!--轮播的内容-->
                            <ul class="innerwrapper">
                                <li>
                                    <a href="#"><img src="./imgs/04_ebook/ppt2-1.jpg" /></a>
                                </li>
                                <li>
                                    <a href="#"><img src="./imgs/04_ebook/ppt2-2.jpg" /></a>
                                </li>
                                <li>
                                    <a href="#"><img src="./imgs/04_ebook/ppt2-3.jpg" /></a>
                                </li>
                                <li>
                                    <a href="#"><img src="./imgs/04_ebook/ppt2-4.jpg" /></a>
                                </li>
                            </ul>
                            <!--数字控制器-->
                            <ul class="controls" id="my_num_controls">
                                <li class="current">1</li>
                                <li>2</li>
                                <li>3</li>
                                <li>4</li>
                            </ul>
                            <!--按钮控制器-->
                            <span class="btnleft"></span>
                            <span class="btnright"></span>
                        </div>
                        <!--轮播结束-->
                    </li>

                    <script>
                        for (let i = 0; i < 6; i++) {
                            document.write(`
                                
                                <li>
                                    <p class="p1 font18 c3">国庆狂欢</p>
                                    <p class="p2 font14 cf60">10万种电子书直降40%</p>
                                    <div>
                                        <img src="./imgs/04_ebook/center3.jpg" alt="">
                                    </div>
                                    <p class="ti15">
                                        <span class="font14 cf42">&yen;49</span>&emsp;
                                        <span class="font14 c3 td">&yen;79</span>
                                    </p>
                                </li> 
                            `)
                        }
                    </script>
                </ul>

            </div>
        </div>
        <!-- ebook右边 -->
        <div class="ebook_right fr">
            <h2>新书畅销榜</h2>
            <ul>
                <li>
                    <span>1</span>
                    <h3 class="title_hide">就喜欢你看不惯我</h3>
                    <div class="clearfix book_show">
                        <img src="./imgs/04_ebook/right.jpg" alt="" class="fl">
                        <p class="fl">
                            从你的世界路过
                            入选央视“2014中国好书”的80后作品！
                            十年华语畅销小说，王家卫陈国富倾力推荐，
                            1500万次转发，超4亿次阅读
                        </p>
                    </div>
                </li>

                <script>
                    let data_img = [
                        "./imgs/04_ebook/right (1).jpg",
                        "./imgs/04_ebook/right (2).jpg",
                        "./imgs/04_ebook/right (3).jpg",
                        "./imgs/04_ebook/right (4).jpg",
                        "./imgs/04_ebook/right (5).jpg",
                        "./imgs/04_ebook/right (6).jpg",
                        "./imgs/04_ebook/right (7).jpg"
                    ]
                    for (let i = 1; i < 7; i++) {
                        document.write(`
                        <li>
                            <span>${i + 1}</span>
                            <h3 class="">就喜欢你看不惯我</h3>
                            <div class="clearfix">
                                <img src="${data_img[i]}"" class="fl">
                                <p class="fl">
                                    从你的世界路过
                                    入选央视“2014中国好书”的80后作品！
                                    十年华语畅销小说，王家卫陈国富倾力推荐， 
                                    1500万次转发，超4亿次阅读
                                </p>
                            </div>
                        </li>
                        
                        `)
                    }
                </script>
            </ul>
        </div>
    </div>

    <!-- 5.服装 -->
    <div id="cloth" class="wrapper floor">
        <!-- 上面标题部分 -->
        <div class="common_title clearfix">
            <h1 class="fl">服装</h1>
            <ul class="fr">
                <li class="active">女装内衣</li>
                <li>热销男装</li>
                <li>精品鞋靴</li>
            </ul>
        </div>
        <!-- 1 -->
        <!-- 中间内容 -->
        <div class="tab_box common_body clearfix on">
            <!-- 内容左 -->
            <div class="cc_left fl">
                <img src="./imgs/05_clothing/1.jpg" alt="">
                <ul class="clearfix">
                    <script>
                        let data_li1=[
                            "女包",
                            "防晒品",
                            "短裤",
                            "冰丝内裤",
                            "男包",
                            "功能箱包",
                            "蕾丝衬衫",
                            "奢侈品",
                            "男鞋",
                            "女鞋",
                            "女包",
                            "全部分类&gt;"
                        ]
                        for(i=0;i<12;i++){
                            document.write(`
                            <li>${data_li1[i]}</li>
                        `)
                        } 
                    </script>
                </ul>
            </div>
            <!-- 内容中 -->
            <div class="cc_center fl">
                <!-- 轮播图 -->
                <div class="pptbox fl" id="bannerInner">
                    <!--轮播的内容-->
                    <ul class="innerwrapper">
                        <li><a href="#"><img src="./imgs/05_clothing/2-1.jpg"></a></li>
                        <li><a href="#"><img src="./imgs/05_clothing/2-2.jpg"></a></li>
                        <li><a href="#"><img src="./imgs/05_clothing/2-3.jpg"></a></li>
                        <li><a href="#"><img src="./imgs/05_clothing/2-3.jpg"></a></li>
                    </ul>
                    <!--数字控制器-->
                    <ul class="controls" id="my_num_controls">
                        <li class="current">1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                    </ul>
                    <!--按钮控制器-->
                    <span class="btnleft"></span>
                    <span class="btnright"></span>
                </div>
                <img src="./imgs/05_clothing/3.jpg" alt="">
            </div>
            <!-- 内容右 -->
            <div class="cc_right fr">
                <ul class="clearfix">
                    <li><img src="./imgs/05_clothing/4-1.jpg" alt=""></li>
                    <li><img src="./imgs/05_clothing/4-1.jpg" alt=""></li>
                    <li><img src="./imgs/05_clothing/4-1.jpg" alt=""></li>
                </ul>
                <ul class="clearfix">
                    <li><img src="./imgs/05_clothing/5-1.jpg" alt=""></li>
                    <li><img src="./imgs/05_clothing/5-1.jpg" alt=""></li>
                    <li><img src="./imgs/05_clothing/5-1.jpg" alt=""></li>
                </ul>
            </div>
        </div>
        <!-- 2 -->
         <!-- 中间内容 -->
         <div class="tab_box common_body clearfix">
            <!-- 内容左 -->
            <div class="cc_left fl">
                <img src="./imgs/05_clothing/1 - 副本.jpg" alt="">
                <ul class="clearfix">
                    <script>
                        let data_li2=[
                            "女包",
                            "防晒品",
                            "短裤",
                            "冰丝内裤",
                            "男包",
                            "功能箱包",
                            "蕾丝衬衫",
                            "奢侈品",
                            "男鞋",
                            "女鞋",
                            "女包",
                            "全部分类&gt;"
                        ]
                        for(i=0;i<12;i++){
                            document.write(`
                            <li>${data_li2[i]}</li>
                        `)
                        } 
                    </script>
                </ul>
            </div>
            <!-- 内容中 -->
            <div class="cc_center fl">
                <!-- 轮播图 -->
                <div class="pptbox fl" id="bannerInner">
                    <!--轮播的内容-->
                    <ul class="innerwrapper">
                        <li><a href="#"><img src="./imgs/05_clothing/2-1.jpg"></a></li>
                        <li><a href="#"><img src="./imgs/05_clothing/2-2.jpg"></a></li>
                        <li><a href="#"><img src="./imgs/05_clothing/2-3.jpg"></a></li>
                        <li><a href="#"><img src="./imgs/05_clothing/2-3.jpg"></a></li>
                    </ul>
                    <!--数字控制器-->
                    <ul class="controls" id="my_num_controls">
                        <li class="current">1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                    </ul>
                    <!--按钮控制器-->
                    <span class="btnleft"></span>
                    <span class="btnright"></span>
                </div>
                <img src="./imgs/05_clothing/3.jpg" alt="">
            </div>
            <!-- 内容右 -->
            <div class="cc_right fr">
                <ul class="clearfix">
                    <li><img src="./imgs/05_clothing/4-2.jpg" alt=""></li>
                    <li><img src="./imgs/05_clothing/4-2.jpg" alt=""></li>
                    <li><img src="./imgs/05_clothing/4-2.jpg" alt=""></li>
                </ul>
                <ul class="clearfix">
                    <li><img src="./imgs/05_clothing/5-2.jpg" alt=""></li>
                    <li><img src="./imgs/05_clothing/5-2.jpg" alt=""></li>
                    <li><img src="./imgs/05_clothing/5-2.jpg" alt=""></li>
                </ul>
            </div>
        </div>
        <!-- 3 -->
         <!-- 中间内容 -->
         <div class="tab_box common_body clearfix">
            <!-- 内容左 -->
            <div class="cc_left fl">
                <img src="./imgs/05_clothing/1.jpg" alt="">
                <ul class="clearfix">
                    <script>
                        let data_li3=[
                            "女包",
                            "防晒品",
                            "短裤",
                            "冰丝内裤",
                            "男包",
                            "功能箱包",
                            "蕾丝衬衫",
                            "奢侈品",
                            "男鞋",
                            "女鞋",
                            "女包",
                            "全部分类&gt;"
                        ]
                        for(i=0;i<12;i++){
                            document.write(`
                            <li>${data_li3[i]}</li>
                        `)
                        } 
                    </script>
                </ul>
            </div>
            <!-- 内容中 -->
            <div class="cc_center fl">
                <!-- 轮播图 -->
                <div class="pptbox fl" id="bannerInner">
                    <!--轮播的内容-->
                    <ul class="innerwrapper">
                        <li><a href="#"><img src="./imgs/05_clothing/2-1.jpg"></a></li>
                        <li><a href="#"><img src="./imgs/05_clothing/2-2.jpg"></a></li>
                        <li><a href="#"><img src="./imgs/05_clothing/2-3.jpg"></a></li>
                        <li><a href="#"><img src="./imgs/05_clothing/2-3.jpg"></a></li>
                    </ul>
                    <!--数字控制器-->
                    <ul class="controls" id="my_num_controls">
                        <li class="current">1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                    </ul>
                    <!--按钮控制器-->
                    <span class="btnleft"></span>
                    <span class="btnright"></span>
                </div>
                <img src="./imgs/05_clothing/3.jpg" alt="">
            </div>
            <!-- 内容右 -->
            <div class="cc_right fr">
                <ul class="clearfix">
                    <li><img src="./imgs/05_clothing/4-3.jpg" alt=""></li>
                    <li><img src="./imgs/05_clothing/4-3.jpg" alt=""></li>
                    <li><img src="./imgs/05_clothing/4-3.jpg" alt=""></li>
                </ul>
                <ul class="clearfix">
                    <li><img src="./imgs/05_clothing/5-3.jpg" alt=""></li>
                    <li><img src="./imgs/05_clothing/5-3.jpg" alt=""></li>
                    <li><img src="./imgs/05_clothing/5-3.jpg" alt=""></li>
                </ul>
            </div>
        </div>
        <!-- 下面部分 -->
        <div class="common_bottom">
            <img src="./imgs/05_clothing/logo (1).jpg" alt="">
            <img src="./imgs/05_clothing/logo (2).jpg" alt="">
            <img src="./imgs/05_clothing/logo (3).jpg" alt="">
            <img src="./imgs/05_clothing/logo (4).jpg" alt="">
            <img src="./imgs/05_clothing/logo (5).jpg" alt="">
            <img src="./imgs/05_clothing/logo (6).jpg" alt="">
            <img src="./imgs/05_clothing/logo (7).jpg" alt="">
            <img src="./imgs/05_clothing/logo (8).jpg" alt="">
            <img src="./imgs/05_clothing/logo (9).jpg" alt="">
        </div>
    </div>

    <!-- 6.运动 -->
    <div id="sports" class="wrapper floor">
        <!-- 上面标题部分 -->
        <div class="common_title clearfix">
            <h1 class="fl">户外运动</h1>
            <ul class="fr">
                <li class="active">国际名品</li>
                <li>户外装备</li>
                <li>运动潮流</li>
            </ul>
        </div>
        <!-- 1 -->
        <!-- 中间内容 -->
        <div class="tab_box common_body clearfix on">
            <!-- 内容左 -->
            <div class="cc_left fl">
                <img src="./imgs/06_sports/1.jpg" alt="">
                <ul class="clearfix">
                    <script>
                        let data_li4=[
                            "女包",
                            "防晒品",
                            "短裤",
                            "冰丝内裤",
                            "男包",
                            "功能箱包",
                            "蕾丝衬衫",
                            "奢侈品",
                            "男鞋",
                            "女鞋",
                            "女包",
                            "全部分类&gt;"
                        ]
                        for(i=0;i<12;i++){
                            document.write(`
                            <li>${data_li4[i]}</li>
                        `)
                        } 
                    </script>
                </ul>
            </div>
            <!-- 内容中 -->
            <div class="cc_center fl">
                <!-- 轮播图 -->
                <div class="pptbox fl" id="bannerInner">
                    <!--轮播的内容-->
                    <ul class="innerwrapper">
                        <li><a href="#"><img src="./imgs/06_sports/2-1.jpg"></a></li>
                        <li><a href="#"><img src="./imgs/06_sports/2-2.jpg"></a></li>
                        <li><a href="#"><img src="./imgs/06_sports/2-3.jpg"></a></li>
                        <li><a href="#"><img src="./imgs/06_sports/2-4.jpg"></a></li>
                    </ul>
                    <!--数字控制器-->
                    <ul class="controls" id="my_num_controls">
                        <li class="current">1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                    </ul>
                    <!--按钮控制器-->
                    <span class="btnleft"></span>
                    <span class="btnright"></span>
                </div>
                <img src="./imgs/05_clothing/3.jpg" alt="">
            </div>
            <!-- 内容右 -->
            <div class="cc_right fr">
                <ul class="clearfix">
                    <li><img src="./imgs/06_sports/4-1.jpg" alt=""></li>
                    <li><img src="./imgs/06_sports/4-1.jpg" alt=""></li>
                    <li><img src="./imgs/06_sports/4-1.jpg" alt=""></li>
                </ul>
                <ul class="clearfix">
                    <li><img src="./imgs/06_sports/5-1.jpg" alt=""></li>
                    <li><img src="./imgs/06_sports/5-1.jpg" alt=""></li>
                    <li><img src="./imgs/06_sports/5-1.jpg" alt=""></li>
                </ul>
            </div>
        </div>
        <!-- 2 -->
         <!-- 中间内容 -->
         <div class="tab_box common_body clearfix">
            <!-- 内容左 -->
            <div class="cc_left fl">
                <img src="./imgs/05_clothing/1 - 副本.jpg" alt="">
                <ul class="clearfix">
                    <script>
                        let data_li5=[
                            "女包",
                            "防晒品",
                            "短裤",
                            "冰丝内裤",
                            "男包",
                            "功能箱包",
                            "蕾丝衬衫",
                            "奢侈品",
                            "男鞋",
                            "女鞋",
                            "女包",
                            "全部分类&gt;"
                        ]
                        for(i=0;i<12;i++){
                            document.write(`
                            <li>${data_li5[i]}</li>
                        `)
                        } 
                    </script>
                </ul>
            </div>
            <!-- 内容中 -->
            <div class="cc_center fl">
                <!-- 轮播图 -->
                <div class="pptbox fl" id="bannerInner">
                    <!--轮播的内容-->
                    <ul class="innerwrapper">
                        <li><a href="#"><img src="./imgs/05_clothing/2-1.jpg"></a></li>
                        <li><a href="#"><img src="./imgs/05_clothing/2-2.jpg"></a></li>
                        <li><a href="#"><img src="./imgs/05_clothing/2-3.jpg"></a></li>
                        <li><a href="#"><img src="./imgs/05_clothing/2-3.jpg"></a></li>
                    </ul>
                    <!--数字控制器-->
                    <ul class="controls" id="my_num_controls">
                        <li class="current">1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                    </ul>
                    <!--按钮控制器-->
                    <span class="btnleft"></span>
                    <span class="btnright"></span>
                </div>
                <img src="./imgs/05_clothing/3.jpg" alt="">
            </div>
            <!-- 内容右 -->
            <div class="cc_right fr">
                <ul class="clearfix">
                    <li><img src="./imgs/06_sports/4-2.jpg" alt=""></li>
                    <li><img src="./imgs/06_sports/4-2.jpg" alt=""></li>
                    <li><img src="./imgs/06_sports/4-2.jpg" alt=""></li>
                </ul>
                <ul class="clearfix">
                    <li><img src="./imgs/06_sports/5-2.jpg" alt=""></li>
                    <li><img src="./imgs/06_sports/5-2.jpg" alt=""></li>
                    <li><img src="./imgs/06_sports/5-2.jpg" alt=""></li>
                </ul>
            </div>
        </div>
        <!-- 3 -->
         <!-- 中间内容 -->
         <div class="tab_box common_body clearfix">
            <!-- 内容左 -->
            <div class="cc_left fl">
                <img src="./imgs/05_clothing/1.jpg" alt="">
                <ul class="clearfix">
                    <script>
                        let data_li6=[
                            "女包",
                            "防晒品",
                            "短裤",
                            "冰丝内裤",
                            "男包",
                            "功能箱包",
                            "蕾丝衬衫",
                            "奢侈品",
                            "男鞋",
                            "女鞋",
                            "女包",
                            "全部分类&gt;"
                        ]
                        for(i=0;i<12;i++){
                            document.write(`
                            <li>${data_li6[i]}</li>
                        `)
                        } 
                    </script>
                </ul>
            </div>
            <!-- 内容中 -->
            <div class="cc_center fl">
                <!-- 轮播图 -->
                <div class="pptbox fl" id="bannerInner">
                    <!--轮播的内容-->
                    <ul class="innerwrapper">
                        <li><a href="#"><img src="./imgs/05_clothing/2-1.jpg"></a></li>
                        <li><a href="#"><img src="./imgs/05_clothing/2-2.jpg"></a></li>
                        <li><a href="#"><img src="./imgs/05_clothing/2-3.jpg"></a></li>
                        <li><a href="#"><img src="./imgs/05_clothing/2-3.jpg"></a></li>
                    </ul>
                    <!--数字控制器-->
                    <ul class="controls" id="my_num_controls">
                        <li class="current">1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                    </ul>
                    <!--按钮控制器-->
                    <span class="btnleft"></span>
                    <span class="btnright"></span>
                </div>
                <img src="./imgs/05_clothing/3.jpg" alt="">
            </div>
            <!-- 内容右 -->
            <div class="cc_right fr">
                <ul class="clearfix">
                    <li><img src="./imgs/06_sports/4-3.jpg" alt=""></li>
                    <li><img src="./imgs/06_sports/4-3.jpg" alt=""></li>
                    <li><img src="./imgs/06_sports/4-3.jpg" alt=""></li>
                </ul>
                <ul class="clearfix">
                    <li><img src="./imgs/06_sports/5-3.jpg" alt=""></li>
                    <li><img src="./imgs/06_sports/5-3.jpg" alt=""></li>
                    <li><img src="./imgs/06_sports/5-3.jpg" alt=""></li>
                </ul>
            </div>
        </div>
        <!-- 下面部分 -->
        <div class="common_bottom">
            <img src="./imgs/05_clothing/logo (1).jpg" alt="">
            <img src="./imgs/05_clothing/logo (2).jpg" alt="">
            <img src="./imgs/05_clothing/logo (3).jpg" alt="">
            <img src="./imgs/05_clothing/logo (4).jpg" alt="">
            <img src="./imgs/05_clothing/logo (5).jpg" alt="">
            <img src="./imgs/05_clothing/logo (6).jpg" alt="">
            <img src="./imgs/05_clothing/logo (7).jpg" alt="">
            <img src="./imgs/05_clothing/logo (8).jpg" alt="">
            <img src="./imgs/05_clothing/logo (9).jpg" alt="">
        </div>
    </div>

    <!-- 7.童装 -->
    <div id="children" class="wrapper floor">
        <!-- 上面标题部分 -->
        <div class="common_title clearfix">
            <h1 class="fl">童装 童鞋 婴儿装</h1>
            <ul class="fr">
                <li class="active">儿童服装</li>
                <li>婴儿装</li>
                <li>小潮童装</li>
            </ul>
        </div>
        <!-- 1 -->
        <!-- 中间内容 -->
        <div class="tab_box common_body clearfix on">
            <!-- 内容左 -->
            <div class="cc_left fl">
                <img src="./imgs/07_children/1.jpg" alt="">
                <ul class="clearfix">
                    <script>
                        let data_li7=[
                            "女包",
                            "防晒品",
                            "短裤",
                            "冰丝内裤",
                            "男包",
                            "功能箱包",
                            "蕾丝衬衫",
                            "奢侈品",
                            "男鞋",
                            "女鞋",
                            "女包",
                            "全部分类&gt;"
                        ]
                        for(i=0;i<12;i++){
                            document.write(`
                            <li>${data_li7[i]}</li>
                        `)
                        } 
                    </script>
                </ul>
            </div>
            <!-- 内容中 -->
            <div class="cc_center fl">
                <!-- 轮播图 -->
                <div class="pptbox fl" id="bannerInner">
                    <!--轮播的内容-->
                    <ul class="innerwrapper">
                        <li><a href="#"><img src="./imgs/07_children/2-1.jpg"></a></li>
                        <li><a href="#"><img src="./imgs/07_children/2-2.jpg"></a></li>
                        <li><a href="#"><img src="./imgs/07_children/2-3.jpg"></a></li>
                        <li><a href="#"><img src="./imgs/07_children/2-4.jpg"></a></li>
                    </ul>
                    <!--数字控制器-->
                    <ul class="controls" id="my_num_controls">
                        <li class="current">1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                    </ul>
                    <!--按钮控制器-->
                    <span class="btnleft"></span>
                    <span class="btnright"></span>
                </div>
                <img src="./imgs/05_clothing/3.jpg" alt="">
            </div>
            <!-- 内容右 -->
            <div class="cc_right fr">
                <ul class="clearfix">
                    <li><img src="./imgs/07_children/4-1.jpg" alt=""></li>
                    <li><img src="./imgs/07_children/4-1.jpg" alt=""></li>
                    <li><img src="./imgs/07_children/4-1.jpg" alt=""></li>
                </ul>
                <ul class="clearfix">
                    <li><img src="./imgs/07_children/5-1.jpg" alt=""></li>
                    <li><img src="./imgs/07_children/5-1.jpg" alt=""></li>
                    <li><img src="./imgs/07_children/5-1.jpg" alt=""></li>
                </ul>
            </div>
        </div>
        <!-- 2 -->
         <!-- 中间内容 -->
         <div class="tab_box common_body clearfix">
            <!-- 内容左 -->
            <div class="cc_left fl">
                <img src="./imgs/05_clothing/1.jpg" alt="">
                <ul class="clearfix">
                    <script>
                        let data_li8=[
                            "女包",
                            "防晒品",
                            "短裤",
                            "冰丝内裤",
                            "男包",
                            "功能箱包",
                            "蕾丝衬衫",
                            "奢侈品",
                            "男鞋",
                            "女鞋",
                            "女包",
                            "全部分类&gt;"
                        ]
                        for(i=0;i<12;i++){
                            document.write(`
                            <li>${data_li8[i]}</li>
                        `)
                        } 
                    </script>
                </ul>
            </div>
            <!-- 内容中 -->
            <div class="cc_center fl">
                <!-- 轮播图 -->
                <div class="pptbox fl" id="bannerInner">
                    <!--轮播的内容-->
                    <ul class="innerwrapper">
                        <li><a href="#"><img src="./imgs/05_clothing/2-1.jpg"></a></li>
                        <li><a href="#"><img src="./imgs/05_clothing/2-2.jpg"></a></li>
                        <li><a href="#"><img src="./imgs/05_clothing/2-3.jpg"></a></li>
                        <li><a href="#"><img src="./imgs/05_clothing/2-3.jpg"></a></li>
                    </ul>
                    <!--数字控制器-->
                    <ul class="controls" id="my_num_controls">
                        <li class="current">1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                    </ul>
                    <!--按钮控制器-->
                    <span class="btnleft"></span>
                    <span class="btnright"></span>
                </div>
                <img src="./imgs/05_clothing/3.jpg" alt="">
            </div>
            <!-- 内容右 -->
            <div class="cc_right fr">
                <ul class="clearfix">
                    <li><img src="./imgs/07_children/4-2.png" alt=""></li>
                    <li><img src="./imgs/07_children/4-2.png" alt=""></li>
                    <li><img src="./imgs/07_children/4-2.png" alt=""></li>
                </ul>
                <ul class="clearfix">
                    <li><img src="./imgs/07_children/5-2.jpg" alt=""></li>
                    <li><img src="./imgs/07_children/5-2.jpg" alt=""></li>
                    <li><img src="./imgs/07_children/5-2.jpg" alt=""></li>
                </ul>
            </div>
        </div>
        <!-- 3 -->
         <!-- 中间内容 -->
         <div class="tab_box common_body clearfix">
            <!-- 内容左 -->
            <div class="cc_left fl">
                <img src="./imgs/06_sports/1.jpg" alt="">
                <ul class="clearfix">
                    <script>
                        let data_li9=[
                            "女包",
                            "防晒品",
                            "短裤",
                            "冰丝内裤",
                            "男包",
                            "功能箱包",
                            "蕾丝衬衫",
                            "奢侈品",
                            "男鞋",
                            "女鞋",
                            "女包",
                            "全部分类&gt;"
                        ]
                        for(i=0;i<12;i++){
                            document.write(`
                            <li>${data_li9[i]}</li>
                        `)
                        } 
                    </script>
                </ul>
            </div>
            <!-- 内容中 -->
            <div class="cc_center fl">
                <!-- 轮播图 -->
                <div class="pptbox fl" id="bannerInner">
                    <!--轮播的内容-->
                    <ul class="innerwrapper">
                        <li><a href="#"><img src="./imgs/05_clothing/2-1.jpg"></a></li>
                        <li><a href="#"><img src="./imgs/05_clothing/2-2.jpg"></a></li>
                        <li><a href="#"><img src="./imgs/05_clothing/2-3.jpg"></a></li>
                        <li><a href="#"><img src="./imgs/05_clothing/2-3.jpg"></a></li>
                    </ul>
                    <!--数字控制器-->
                    <ul class="controls" id="my_num_controls">
                        <li class="current">1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                    </ul>
                    <!--按钮控制器-->
                    <span class="btnleft"></span>
                    <span class="btnright"></span>
                </div>
                <img src="./imgs/05_clothing/3.jpg" alt="">
            </div>
            <!-- 内容右 -->
            <div class="cc_right fr">
                <ul class="clearfix">
                    <li><img src="./imgs/07_children/4-3.jpg" alt=""></li>
                    <li><img src="./imgs/07_children/4-3.jpg" alt=""></li>
                    <li><img src="./imgs/07_children/4-3.jpg" alt=""></li>
                </ul>
                <ul class="clearfix">
                    <li><img src="./imgs/07_children/5-3.jpg" alt=""></li>
                    <li><img src="./imgs/07_children/5-3.jpg" alt=""></li>
                    <li><img src="./imgs/07_children/5-3.jpg" alt=""></li>
                </ul>
            </div>
        </div>
        <!-- 下面部分 -->
        <div class="common_bottom">
            <img src="./imgs/05_clothing/logo (1).jpg" alt="">
            <img src="./imgs/05_clothing/logo (2).jpg" alt="">
            <img src="./imgs/05_clothing/logo (3).jpg" alt="">
            <img src="./imgs/05_clothing/logo (4).jpg" alt="">
            <img src="./imgs/05_clothing/logo (5).jpg" alt="">
            <img src="./imgs/05_clothing/logo (6).jpg" alt="">
            <img src="./imgs/05_clothing/logo (7).jpg" alt="">
            <img src="./imgs/05_clothing/logo (8).jpg" alt="">
            <img src="./imgs/05_clothing/logo (9).jpg" alt="">
        </div>
    </div>

    <!-- 8.家居日用 -->
    <div class="household wrapper floor">
        <h1>家居日用</h1>
        <div class="clearfix">
            <img src="./imgs/08_household/1.jpg" alt="" class="fl">
            <div class="fl">
                <ul class="clearfix ul1">
                    <li><img src="./imgs/08_household/2.jpg" alt=""></li>
                    <li><img src="./imgs/08_household/2.jpg" alt=""></li>
                    <li><img src="./imgs/08_household/2.jpg" alt=""></li>
                    <li><img src="./imgs/08_household/2.jpg" alt=""></li>
                </ul>
                <ul class="clearfix ul2">
                    <li><img src="./imgs/08_household/3.jpg" alt=""></li>
                    <li><img src="./imgs/08_household/3.jpg" alt=""></li>
                    <li><img src="./imgs/08_household/3.jpg" alt=""></li>
                    <li><img src="./imgs/08_household/3.jpg" alt=""></li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 9.promotiongoods推广商品开始 -->
    <div class="promotiongoods wrapper">
        <h1>推广商品<span><i></i><i></i></span></h1>
        <ul class="clearfix">
            <script>
                for (i = 0; i < 10; i++) {
                    document.write(`
                    <li>
                        <div><img src="./imgs/index25_12.jpg" alt="">
                             <p>Pigeon法国奶嘴,无毒天然乳胶</p>
                             <p>￥:189</p>
                             <p><span></span> 已有<span>998</span>条评价</p>
                        </div>
                    </li>
                    `)
                }
            </script>
        </ul>
    </div>
    <!-- promotiongoods推广商品结束 -->


    <!-- 9.页脚开始 -->
    <div class="footer">
        <div class="div1">
            <div class="div2">
                <img src="./imgs/09_footer/footer_top01.png" alt="">
                <img src="./imgs/09_footer/footer_top02.png" alt="">
                <img src="./imgs/09_footer/footer_top03.png" alt="">
                <img src="./imgs/09_footer/footer_top04.png" alt="">
            </div>
        </div>
        <div class="wrapper div3">
            <ul class="ul1 clearfix">
                <li>购物指南
                    <ul>
                        <li><a href="#">购物流程</a></li>
                        <li><a href="#">发票制度</a></li>
                        <li><a href="#">账户管理</a></li>
                        <li><a href="#">会员优惠</a></li>
                    </ul>
                </li>
                <li>支付方式
                    <ul>
                        <li><a href="#">货到付款</a></li>
                        <li><a href="#">网上支付</a></li>
                        <li><a href="#">礼品卡支付</a></li>
                        <li><a href="#">银行转帐</a></li>
                    </ul>
                </li>
                <li>订单服务
                    <ul>
                        <li><a href="#">订单配送查询</a></li>
                        <li><a href="#">订单状态说明</a></li>
                        <li><a href="#">自助取消订单</a></li>
                        <li><a href="#">自助修改订单</a></li>
                    </ul>
                </li>
                <li>退换货
                    <ul>
                        <li><a href="#">退换货政策</a></li>
                        <li><a href="#">自助申请退换货</a></li>
                        <li><a href="#">退换货进度查询</a></li>
                        <li><a href="#">退款方式和时间</a></li>
                    </ul>
                </li>
                <li>商家服务
                    <ul>
                        <li><a href="#">商家服务</a></li>
                        <li><a href="#">运营服务</a></li>
                        <li><a href="#">加入尾品汇</a></li>
                    </ul>
                </li>
            </ul>
            <img src="./imgs/09_footer/footer_logo.png" alt="">
            <p>公司简介&emsp; │ &emsp; Rlations&emsp; │ &emsp;网站联盟 &emsp;│ &emsp;乐购招商&emsp; │ &emsp;机构销售&emsp; │
                &emsp;手机乐购&emsp; │ &emsp;官方Blog&emsp; │ &emsp;热词搜索 </p>
            <p>Copyright&emsp; (C)&emsp; 乐购网&emsp;2004-2016,&emsp;A1l Rights Reserved</p>
        </div>
    </div>
    <!-- 页脚结束 -->

    <!-- 固定头部功能 -->
    <div id="fixedHeader">
        <img src="./imgs/01_header/logo.jpg" alt="">
        <script>
            $(".header .search").clone().appendTo("#fixedHeader")
        </script>
    </div>

    <!-- 楼层跳转 -->
    <div id="floorBox">
        <ul>
            <li class="fbg01" bgc="red"><span>图书</span></li>
            <li class="fbg02" bgc="yellow"><span>服装</span></li>
            <li class="fbg03" bgc="green"><span>运动</span></li>
            <li class="fbg04" bgc="blue"><span>童装</span></li>
            <li class="fbg05" bgc="pink"><span>家居</span></li>
        </ul>
    </div>


    <!-- 回到顶部 -->
    <button class="btn_top"></button>

    
    <!-- 右侧广告栏 -->
    <img src="./imgs/img (1).jpg" alt="" class="img1">
    <img src="./imgs/img (2).jpg" alt="" class="img2">
    <img src="./imgs/img (3).jpg" alt="" class="img3">
    <img src="./imgs/img (4).jpg" alt="" class="img4">
    <div class="car_info">26</div>

    <script src="./lib/slider.js"></script>
    <script type="text/javascript">
       
    </script>
</body>

</html>